<template>
	<view class="content flex">
		<view class="left">
			<u-avatar :src="avatar" :size="50" @click="$emit('click')"></u-avatar>
		</view>
		<view class="right">
			<view class="username" @click="$emit('click')">
				{{username}}
			</view>
			<view class="mtext">
				<block v-if="reply != ''">
					<text class="replyPlain">回复</text>
					<text class="username">{{reply}}</text>
				</block>
				{{text}}
				<text class="mtime">{{time}}</text>
				<text class="reply"  
					v-if="$store.state.user.uid != userId"
					@click="$emit('click')">回复</text>
			</view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
	
	export default {
		name: 'comment',
		props: {
			avatar: {
				type: String,
				default: ''
			},
			username: {
				type: String,
				default: ''
			},
			text: {
				type: String,
				default: ''
			},
			time: {
				type: String,
				default: ''
			},
			reply: {
				type: String,
				default: ''
			},
			userId: {
				type: Number,
				default: -1
			}
		},
		data() {
			return {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	padding: 0 15rpx;
	margin-bottom: 10rpx;
	.left{
		padding: 5rpx 10rpx;
		// background-color: red;
	}
	.right{
		margin-left: 10rpx;
		.username{
			font-size: 25rpx;
			font-weight: bold;
		}
		.mtext{
			font-size: 27rpx;
			margin-top: 5rpx;
			color: #4a4a4a;
			.replyPlain{
				color: #045093;
			}
			.username{
				font-weight: bold;
				margin: 0 10rpx;
			}
			.mtime, .reply{
				margin-left: 10rpx;
				/* #ifdef H5 */
				font-size: 20rpx;
				/* #endif */
			}
			.mtime{
				color: #9e9e9e;
			}
			.reply{
				color: #5500ff;
				cursor: pointer;
			}
		}
	}
}
</style>